﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>翻书动画</title>

    <link rel="stylesheet" href="css/reset.css">

    <link rel="stylesheet" href="css/bookStyle.css" media="screen" type="text/css" />

</head>
<body>
    <div class="book_component">
        <ul class="book_align">
            <li>
                <figure class='book'>
                    <!-- 书的前面 -->
                    <ul class='book_front'>
                        <li>
                            <a class="mark" href="#">翻书动画 </br> 创作：mystery</a>
                        </li>
                        <li></li>
                    </ul>

                    <!-- 书的页面 -->
                    <ul class='book_page'>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>

                    <!-- 合上书本 -->
                    <ul class='book_back'>
                        <li></li>
                        <li></li>
                    </ul>

                    <!-- 书的枝干 -->
                    <ul class='book_limb'>
                        <li></li>
                        <li></li>
                    </ul>
                    <figcaption>
                        <h1>翻书动画</h1>
                        <span>创作: mystery 2017-10-19 </span>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
</body>
</html>